<template>
  <!-- 遮罩层盒子 -->
  <div class="upMyInfo-max-box">
    <div class="upMyInfo-box">
      <!--  内容盒子 -->
      <div class="info-box">
        <!--  头像 -->
        <div class="userLogo">
          <el-upload
            class="avatar-uploader"
            action="http://47.108.147.79:8088/upload/upload1"
            :headers="headers"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :show-file-list="false"
          >
            <img
              :src="formspan.avatar"
              class="avatar"
              style="width: 60px; height: 60px"
            />
            <span class="up-img" @click="upLogo">更改头像</span>
          </el-upload>
        </div>
        <!-- 信息 -->
        <div class="info-content">
          <el-form
            :label-position="labelPosition"
            label-width="90px"
            :model="forminp"
          >
            <el-form-item label="昵称：">
              <el-input
                v-model="forminp.nickname"
                v-if="upState"
                ref="inpName"
                @blur="judgeUname"
              ></el-input>
              <span v-else> {{ formspan.nickname }}</span>
            </el-form-item>
            <el-form-item label="签名：">
              <el-input
                type="textarea"
                v-model="forminp.autograph"
                v-if="upState"
              ></el-input>
              <span v-else> {{ formspan.autograph }}</span>
            </el-form-item>
            <el-form-item label="账号：">
              <span> {{ formspan.account }}</span>
            </el-form-item>
            <el-form-item label="邮箱号：">
              <el-input
                v-model="forminp.email"
                v-if="upState"
                ref="email"
                @blur="judgeEmail"
              ></el-input>
              <span v-else> {{ formspan.email }}</span>
            </el-form-item>
            <el-form-item label="手机号：">
              <el-input
                v-model="forminp.mobilePhoneNumber"
                v-if="upState"
                ref="phoneNumber"
                @blur="judgePhoneNumber"
              ></el-input>
              <span v-else> {{ formspan.mobilePhoneNumber }}</span>
            </el-form-item>
          </el-form>
        </div>
        <!-- 按钮 -->
        <div class="btns">
          <el-button type="success" round v-if="upState" @click="submitInfo"
            >保存</el-button
          >
          <el-button
            type="primary"
            round
            v-else
            style="background-color: salmon; border: 1px solid salmon"
            @click="back"
            >返回</el-button
          >
          <el-button type="info" round @click="onUpdate">修改</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getUserInfo, postUpdateUser } from '../../api/getUser.js';
  export default {
    name: 'UpMyInfo',
    data() {
      return {
        labelPosition: 'left',
        //  表单的数据 (用户修改)
        forminp: {},
        // span的 数据 （用于展示）
        formspan: {},
        upState: false,
        //  修改头像
        uploadAvatar: 'http://47.108.147.79:8088/upload/uploadAvatar', // 修改头像上传的 接口地址
        imageUrl: '', // 存储图片地址
        // 上传头像 请求头
        headers: {
          Authorization: '',
        },
        //  判断 图片是否符合规则
        isLogoType: false,
      };
    },
    methods: {
      // 修改头像
      upLogo() {
        this.headers.Authorization = localStorage.getItem('token');
      },
      //  上传 图片的 钩子函数
      // 上传成功后的钩子
      handleAvatarSuccess(res, file) {
        this.forminp.avatar = res.data;
        postUpdateUser(
          localStorage.getItem('token'),
          this.forminp.autograph,
          this.forminp.avatar,
          this.forminp.email,
          this.forminp.mobilePhoneNumber,
          this.forminp.nickname,
        ).then(res => {
          if (res.data.code == 200) {
            this.$message({
              showClose: true,
              type: 'warning',
              message: '修改成功！',
            });
            this.upState = false;
            this.getUser();
          } else {
            this.$message({
              showClose: true,
              type: 'warning',
              message: '暂时无法修改！',
            });
          }
        });
      },
      //  上传前的钩子
      beforeAvatarUpload(file) {
        const isJPG =
          file.type === 'image/jpeg' ||
          file.type === 'image/png' ||
          file.type === 'image/gif' ||
          file.type === 'image/jpg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message({
            showClose: true,
            type: 'warning',
            message: '上传头像只能是 图片格式!',
          });
        }
        if (!isLt2M) {
          this.$message({
            showClose: true,
            type: 'warning',
            message: '上传头像图片大小不能超过 10MB!',
          });
        }
        return isJPG && isLt2M;
      },
      // 获取用户信息
      async getUser() {
        const { data: res } = await getUserInfo(localStorage.getItem('token'));
        this.formspan = res.data;
      },

      //  点击返回
      back() {
        this.$router.back();
      },
      //  点击修改
      onUpdate() {
        this.upState = true;
        this.forminp = this.formspan;
      },
      // 判断 昵称是否合法
      judgeUname() {
        const uname = this.$refs.inpName.value;
        if (uname.length > 8 || uname.length < 3) {
          this.$message({
            showClose: true,
            type: 'warning',
            message: '出错了哦，用户名必须是3-8位！',
          });
        }
      },
      // 判断 邮箱是否合法
      judgeEmail() {
        const email = this.$refs.email.value;
        const rgemail = /@qq.com/;
        if (email) {
          if (!rgemail.test(email)) {
            this.$message({
              showClose: true,
              type: 'warning',
              message: '出错了哦，必须是qq邮箱！',
            });
          }
        }
      },
      // 判断 手机号是否合法
      judgePhoneNumber() {
        const phone = this.$refs.phoneNumber.value;
        const rgphone =
          /^(13[0-9]|14[0-9]|15[0-9]|166|17[0-9]|18[0-9]|19[8|9])\d{8}$/;
        if (phone) {
          if (!rgphone.test(phone)) {
            this.$message({
              showClose: true,
              type: 'warning',
              message: '出错了哦，手机号不正确哦！',
            });
          }
        }
      },
      //  点击保存
      async submitInfo() {
        const uname = this.$refs.inpName.value;
        const email = this.$refs.email.value;
        const phone = this.$refs.phoneNumber.value;
        const rgPhone =
          /^(13[0-9]|14[0-9]|15[0-9]|166|17[0-9]|18[0-9]|19[8|9])\d{8}$/;
        const rgEmail = /@qq.com/;

        if (uname.length > 8 || uname.length < 3) {
          this.$message({
            showClose: true,
            type: 'warning',
            message: '出错了哦，用户名必须是3-8位！',
          });
        } else if (!rgEmail.test(email)) {
          this.$message({
            showClose: true,
            type: 'warning',
            message: '出错了哦，必须是qq邮箱！',
          });
        } else if (!rgPhone.test(phone)) {
          this.$message({
            showClose: true,
            type: 'warning',
            message: '出错了哦，手机号不正确哦！',
          });
        } else {
          postUpdateUser(
            localStorage.getItem('token'),
            this.forminp.autograph,
            this.forminp.avatar,
            this.forminp.email,
            this.forminp.mobilePhoneNumber,
            this.forminp.nickname,
          ).then(res => {
            if (res.data.code == 200) {
              this.$message({
                showClose: true,
                type: 'warning',
                message: '修改成功！',
              });
              this.upState = false;
              this.getUser();
            } else {
              this.$message({
                showClose: true,
                type: 'warning',
                message: '暂时无法修改！',
              });
            }
          });
        }
      },
    },
    created() {
      this.getUser();
    },
  };
</script>

<style lang="less" scoped>
  ::v-deep .el-form-item__label {
    color: #fff !important;
  }
  ::v-deep .el-input__inner {
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0) !important;
    border: none !important;
    border-bottom: 1px solid #fff !important;
    border-radius: 0px !important;
  }
  ::v-deep form {
    width: 100%;
  }
  @import url('../../state/css/register/upMyInfo.less');
</style>
